<template>
    <div class="sheBeiZhuangTai">
        <div :id="id" class="pie"></div>
    </div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    props: {
        id: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            // id:'',
            options: {
                title: '',
                data: ''
            }
        };
    },
    mounted() {
        // this.initCharts();
    },
    methods: {
        // 柱状图
        initCharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(this.id));
            // 实现相应式，跟随页面变化
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            // 指定图表的配置项和数据
            var option = {
                legend: {
                    show: false,// 将图例设置为不显示
                    // orient: 'vertical',
                    // left: 'left'
                },
                title: {
                    text: this.options.title,
                    // subtext: '',
                    left: 'center',
                    textStyle: {
                        color: '#fff' // 设置标题字体颜色为红色
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {c} ({d}%)'
                },
                
                series: [
                    {
                        name: '设备状态',
                        type: 'pie',
                        radius: '60%',
                        data: this.options.data,
                        label: {
                            show: true,
                            position: 'inside', // 将标签显示在饼图内部
                            // alignTo: 'edge', // 触手指向饼图边缘
                            edgeDistance: '0%', // 触手与饼图的距离
                            formatter: '{d}%'
                        },
                        labelLine: {
                            show: true,
                            length: 15, // 触手的长度
                            length2: 15 // 触手的第二段长度
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '设备状态',
                        type: 'pie',
                        radius: '60%',
                        data: this.options.data,
                        label: {
                            show: true,
                            position: 'outside', // 将标签显示在饼图外部
                            // alignTo: 'edge', // 触手指向饼图边缘
                            edgeDistance: '0%', // 触手与饼图的距离
                            formatter: function (params) {
                                // 自定义标签文字的显示格式
                                var name = params.name;
                                var maxLength = 2; // 设置最大显示长度为8个字
                                if (name.length > maxLength) {
                                    return name.substring(0, maxLength) + '...';
                                }
                                return name;
                            }
                        },
                        labelLine: {
                            show: true,
                            length: 15, // 触手的长度
                            length2: 15 // 触手的第二段长度
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        },
    },
};
</script>
<style>
.sheBeiZhuangTai {
    width: 100%;
    height: 100%;
    /* background-color: #fff; */
}

.pie {
    width: 100%;
    height: 100%;
    margin-top: 20px;
}
</style>